# ECL Playground

_A [@hpcc-js/observable-md](https://github.com/hpcc-systems/Visualization/tree/trunk/packages/observable-md) demo - these demos are currently a work in progress and have dependencies which may or may not exist at any given time..._

## 1 - An ECL Editor

```
viewof eclEditor = editor.ecl();
viewof eclEditor.text(`\

Layout_Person := RECORD
  UNSIGNED1 PersonID;
  STRING15  FirstName;
  STRING25  LastName;
END;

allPeople := DATASET([ {1,'Fred','Smith'},
                       {2,'Joe','Blow'},
                       {3,'Jane','Smith'}],Layout_Person);

somePeople := allPeople(LastName = 'Smith');

//  Outputs  ---
somePeople;
`)
```

## 2 - A Submit Button

```
viewof eclToSubmit = {
    const button = html`<button>Submit</button>`;
    button.onclick = () => {
        button.value = eclEditor;
        button.dispatchEvent(new CustomEvent("input"));
    }
    return button;
}
```

## 3 - A HPCC Platform

* **Platform**:  ${platform.url} 

```
platform = esp("https://play.hpccsystems.com:18010");
results = platform.submit(eclToSubmit);
```

## 4 - Render results in a Table

```
viewof resultsTable = table({height:140});
viewof resultsTable.json(results);
```